<script setup>
	import { onMounted, ref } from 'vue'
	import { onLoad, onReachBottom, onPullDownRefresh } from '@dcloudio/uni-app'
	import { http } from '@/utils/http.js'
	import { parseTime } from '@/utils/index.js'

	const currentPage = ref(1)
	const poineList = ref([])
	async function getDetail() {
		const res = await http.request({
			url: '/api/user/integralLog',
			method: 'POST',
			data: {
				page: currentPage.value,
				limit: 10,
			},
		})
		console.log(res)
		poineList.value = [...poineList.value, ...res.data]
	}

	// 上拉加载
	onReachBottom(() => {
		++currentPage.value
		getDetail() // 获取的数据列表
	})
	// 下拉刷新
	onPullDownRefresh(() => {
		currentPage.value = 1
		poineList.value = []
		getDetail() // 获取的数据列表
		uni.showToast({
			title: '刷新成功',
			icon: 'success',
			duration: 2000,
		})
		uni.stopPullDownRefresh() // 停止刷新
	})

	onLoad(() => {
		getDetail()
	})
</script>

<template>
	<view class="bar"> </view>
	<view class="store-detail">
		<view class="detail-item" v-for="item in poineList" :key="item.id">
			<view class="left">
				<view class="" style="font-size: 28rpx">
					{{ item.title }}
				</view>
				<view class="" style="font-size: 22rpx; color: #9b9b9d">
					{{ parseTime(item.add_time) }}
				</view>
			</view>
			<view class="right" v-if="item.in_type == 1">
				+{{ item.integral }}
			</view>
			<view class="right" v-else> -{{ item.integral }} </view>
		</view>
	</view>
</template>

<style lang="scss" scoped>
	.bar {
		height: 20rpx;
		background-color: #f5f5f5;
	}
	.store-detail {
		padding: 20rpx;
		.detail-item {
			display: flex;
			align-items: center;
			justify-content: space-between;
			height: 154rpx;
			margin-bottom: 20rpx;
			background: #fff;
			border-radius: 10rpx;
			padding: 0rpx 30rpx;
			.left{
				display: flex;
				flex-direction: column;
				justify-content: space-evenly;
				height: 154rpx;
			}
			
			&:last-child {
				border: none;
			}
			.right {
				font-weight: 700;
				font-size: 26rpx;
				color: $all-color;
			}
		}
	}
</style>
